import React, { useState } from "react"
import {
  ResultPage,
  Card,
  Input,
  Button,
  Popup,
  CalendarPickerView,
  Image,
} from "antd-mobile"
import { LoopOutline } from "antd-mobile-icons"
import { useNavigate } from "react-router-dom"
import "./index.css"
import dayjs from "dayjs"
const Index = () => {
  const navigate = useNavigate()
  const [start, setStart] = useState("")
  const [end, setend] = useState("")
  const [date, seDate] = useState(dayjs().format("M月D"))
  const [visible1, setVisible1] = useState(false)
  // 点击跳转到列表页
  const clickJumpList = () => {
    navigate(`/list?start=${start}&end=${end}&date=${date}`)
  }
  return (
    <div className="home-container">
      <ResultPage
        status=""
        title="火车票预定"
        description="便携购票服务您的每一次出行">
        <Card style={{ marginTop: 12 }}>
          {/* 选择城市 */}
          <div className="home-input-city">
            <Input
              placeholder="出发城市"
              value={start}
              onChange={val => {
                setStart(val)
              }}
            />
            <LoopOutline fontSize={60} />
            <Input
              placeholder="到达城市"
              value={end}
              onChange={val => {
                setend(val)
              }}
              style={{ "--text-align": "right" }}
            />
          </div>
          {/* 选择日期 */}
          <div className="home-date" onClick={() => setVisible1(true)}>
            {date}
          </div>
          <Button color="primary" block onClick={() => clickJumpList()}>
            查询
          </Button>
          <div className="city-btm">
            <Button size="mini" color="primary" fill="outline" shape="rounded">
              北京-广州
            </Button>
            <span>清空</span>
          </div>
        </Card>
        <div className="empty-box"></div>
        <Card>
          <div className="home-gird">
            <div>
              <Image
                src="/404"
                width={60}
                height={60}
                style={{ borderRadius: "50%" }}
              />
              <span>12306账号</span>
            </div>
            <div>
              <Image
                src="/404"
                width={60}
                height={60}
                style={{ borderRadius: "50%" }}
              />
              <span>我得订单</span>
            </div>
            <div>
              <Image
                src="/404"
                width={60}
                height={60}
                style={{ borderRadius: "50%" }}
              />
              <span>帮助中心</span>
            </div>
          </div>
        </Card>
        <Popup
          visible={visible1}
          onMaskClick={() => {
            setVisible1(false)
          }}
          onClose={() => {
            setVisible1(false)
          }}>
          <CalendarPickerView
            onChange={val => {
              seDate(dayjs(val).format("M月D"))
              setVisible1(false)
            }}
          />
        </Popup>
      </ResultPage>
    </div>
  )
}

export default Index
